<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<title></title>
		<style type="text/css">
			.hiding {
				margin-left: -100%;
				opacity: 0.5;
			}
			
			.hidden {
				display: none;
			}
		</style>
	</head>

	<body class="gray-bg">
		<form class="myform">
			<div class="hot-search row">
				<a href="javascript:history.go(-1);"><img src="../images/back.png" /></a>
				<div class="search row">
					<img src="../images/gray-search.png" style="width: .8rem;margin-left: .5rem;" />
					<input type="text" id="search-text" placeholder="请输入关键词" />
					<button type="button">搜索</button>
				</div>
			</div>
			<!--城市定位-->
			<div class="currentcity">
				<h2>当前定位城市</h2>
				<p><span>海口</span>网络定位</p>
				<a href="#"><img src="../images/Refresh.png" /></a>
			</div>
			<!--最近访问-->
			<div class="currentcity">
				<h2>最近访问城市</h2>
				<ul class="row">
					<li><a href="#">北海</a></li>
					<li><a href="#">西双版纳</a></li>
					<li><a href="#">西双版纳</a></li>
					<li><a href="#">西双版纳</a></li>
					<li><a href="#">西双版纳</a></li>
					<li><a href="#">西双版纳</a></li>
					<li><a href="#">西双版纳</a></li>
				</ul>
			</div>
			<!--根据首字母搜索-->
			<div class="searchletter addresslist citylist">
				<div id="letter"></div>
				<div class="sort_box" id="list">
					<div class="sort_list">
						<div class="num_name">澳门</div>
					</div>
					<div class="sort_list">
						<div class="num_name">三亚</div>
					</div>
					<div class="sort_list">
						<div class="num_name">海口</div>
					</div>
					<div class="sort_list">
						<div class="num_name">北京</div>
					</div>
					<div class="sort_list">
						<div class="num_name">上海</div>
					</div>
					<div class="sort_list">
						<div class="num_name">广州</div>
					</div>
					<div class="sort_list">
						<div class="num_name">深圳</div>
					</div>
					<div class="sort_list">
						<div class="num_name">福建</div>
					</div>
					<div class="sort_list">
						<div class="num_name">江苏</div>
					</div>
					<div class="sort_list">
						<div class="num_name">江西</div>
					</div>
					<div class="sort_list">
						<div class="num_name">#####%%^^</div>
					</div>
				</div>
				<div class="initials">
					<ul>
						<li style="display: none;"><i class="mui-icon mui-icon-search"></i></li>
					</ul>
				</div>
			</div>
		</form>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/wap.js"></script>
		<!--城市按首字母排序-->
		<script src="../js/jquery.charfirst.pinyin.js"></script>
		<script src="../js/sort.js"></script>
		<!--过滤搜索-->
		<script type="text/javascript">
			$(document).ready(function() {
				$("#search-text").keyup(function() {
					var searchTerm = $("#search-text").val();
					var listItem = $('#list').find('.num_name');
					var searchSplit = searchTerm.replace(/ /g, "'):containsi('");
					$.extend($.expr[':'], {
						'containsi': function(elem, i, match, array) {
							return (elem.textContent || elem.innerText || '').toLowerCase()
								.indexOf((match[3] || "").toLowerCase()) >= 0;
						}
					});
					$("#list .sort_letter").not(":containsi('" + searchSplit + "')").each(function(e) {
						$(this).addClass('hiding out').removeClass('in');
						setTimeout(function() {
							$('.out').addClass('hidden');
						}, 300);
					});
					$("#list .sort_list").not(":containsi('" + searchSplit + "')").each(function(e) {
						$(this).addClass('hiding out').removeClass('in');
						$(this).prev('.sort_letter').addClass('hiding out').removeClass('in');
						setTimeout(function() {
							$('.out').addClass('hidden');
						}, 300);
					});
					$("#list .sort_list:containsi('" + searchSplit + "')").each(function(e) {
						$(this).removeClass('hidden out').addClass('in');
						$(this).prevAll('.sort_letter').eq(0).addClass('in').removeClass('hidden out');
						setTimeout(function() {
							$('.in').removeClass('hiding');
						}, 1);
					});
				});
			});
		</script>
	</body>

</html>